<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>案例二：选项卡新闻列表</title>
    <style type="text/css">
        *{margin: 0px; padding:0px;}
        html{font-family: "Microsoft YaHei"}
        .wrap {width: 360px;height:255px;border: 1px solid #33ccff;margin:50px auto}
        .nav{background: #e6e6e6;height: 35px;line-height: 35px;word-spacing: 10px;padding-left: 15px;}
        .content{width: 106px;height:70px;margin: 30px 0 0 10px;background: url("images/3-1.jpg") no-repeat center/cover;padding-top: 10px}
        .content-p{width: 106px;height: 20px;margin-left: 10px;text-align: center;color: #fff;background: #000;font-size: 14px;}
        dd{height: 28px; margin-left: 10px; background: url("images/3-2.png") no-repeat;background-position: 0 -288px;}
        .dd1{margin: -110px  0 0 120px;}
        .dd2{margin: 0 0 0 120px;}
        .dd3{margin: 0 0 0 10px;}
        a{text-decoration: none;color: #000000}
        .a1{margin:0 0 0 10px;font-size:14px;color:#ff00ff;}
        .a2{margin:0 0 0 2px;font-size:14px;}
    </style>
</head>
<body>
<div class="wrap">
    <p class="nav">
        <a href="#">鲜城</a>
        <a href="#">美食</a>
        <a href="#">休闲</a>
    </p>
    <div class="content"></div>
    <p class="content-p">英伦美貌红丝绒</p>
    <dl>
        <dt></dt>
        <dd class="dd1">
            <a class="a1" href="#">[美食]</a>
            <a class="a2" href="#">一炸入魂！台湾超级大鸡排</a>
        </dd>
        <dd class="dd2">
            <a class="a1" href="#">[美食]</a>
            <a class="a2" href="#">一炸入魂！台湾超级大鸡排</a>
        </dd>
        <dd class="dd2">
            <a class="a1" href="#">[美食]</a>
            <a class="a2" href="#">一炸入魂！台湾超级大鸡排</a>
        </dd>

        <dd class="dd2">
            <a class="a1" href="#">[美食]</a>
            <a class="a2" href="#">一炸入魂！台湾超级大鸡排</a>
        </dd>
        <dd class="dd3">
            <a class="a1" href="#">[美食]</a>
            <a class="a2" href="#">安逸重庆麻辣锅煮嫩牛肉 宵夜酒酿冰粉搭卤味</a>
        </dd>
        <dd class="dd3">
            <a class="a1" href="#">[美食]</a>
            <a class="a2" href="#">安逸重庆麻辣锅煮嫩牛肉 宵夜酒酿冰粉搭卤味</a>
        </dd>
        <dd class="dd3">
            <a class="a1" href="#">[美食]</a>
            <a class="a2" href="#">安逸重庆麻辣锅煮嫩牛肉 宵夜酒酿冰粉搭卤味</a>
        </dd>
    </dl>
</div>


</body></html>